<template>
    <view class="container" v-show="show" :style="themeColor">
        <view class="result-status">
            <image src="/static/icon/success.png" class="success-icon" mode="widthFix"></image>
            <view class="tip">订单提交成功，请及时支付</view>
        </view>
        <view class="ought-price">
            <view><text>￥</text>{{ order.PayMoney - discountsPrice }}</view>
            <text>{{ order.ArrearsPrice == order.PriceSum ? "应付" : "待付" }}金额</text>
        </view>
        <view class="footer">
            <button class="btn" @click="clickFn" :disabled="!data.IsAblePay || order.State == 7">
                {{ order.State == 7 ? "订单审核中，待通过后付款" : "确认支付" }}
            </button>
        </view>
        <uni-popup ref="authorizationTip" type="center" :animation="false">
            <view class="pop-return-box">
                <authorization-box @tipclose="tipclose" :businessId="businessId"></authorization-box>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { GetPayOrderId, XianPayNew } from "@/service/api/order.js"
import { IsSetPayPassword, CheckPayPassword } from "@/service/api/member.js"
import { GetMiniAppPayData } from "@/service/api/weChat.js"
import { MiniProgramPay, FuiouMiniAppPay } from "@/service/api/open.js"
import authorizationBox from "@/components/order/authorization-box.vue"
import storage from "@/uni-sub-base/utils/storage.js"
import configs from "@/config/config.js"
import { helPayFn } from "@/utils/orderUtil.js"
export default {
    components: {
        authorizationBox,
    },
    data() {
        return {
            show: false,
            orderId: 0,
            data: {},
            order: {},
            formapp: 0,
            businessId: "",
            payWay: null,
            discountsPrice: 0,
            share: {
                title: "订单付款",
                path: "",
                imageUrl: "",
                desc: "",
                content: "",
            },
        }
    },
    computed: {},
    onShareAppMessage() {
        return {
            title: this.share.title,
            path: this.share.path,
            imageUr: this.share.imageUrl,
            success(res) {
                uni.showToast({
                    title: "分享成功",
                })
            },
            fail(res) {
                uni.showToast({
                    title: "分享失败",
                    icon: "none",
                })
            },
        }
    },
    onLoad(e) {
        this.orderId = e.orderId
        if (e.formapp) {
            this.formapp = e.formapp
        }
        if (e.businessId) {
            this.businessId = e.businessId
        }
        if (e.payWay) {
            this.payWay = e.payWay
        }
        if (e.discountsPrice) {
            this.discountsPrice = e.discountsPrice
        }
        let webInfo = storage.getCache("webInfo")
        if (webInfo.Token) {
            webInfo.Token = null
        }
        this.share.path = "/pages_shop/packet/order/appGoMiniwaitPay?orderId=" + e.orderId + "&businessId=" + e.businessId + "&payWay=" + e.payWay + "&formapp=1"
        storage.setCache("webInfo", webInfo)
    },
    mounted() {
        this.getOrderDetail()
    },
    onShow() { },
    methods: {
        //获取订单详情
        getOrderDetail() {
            let path = "?id=" + this.orderId + "&isXianXia=1&businessId=" + this.businessId
            GetPayOrderId(path).then((res) => {
                if (res.State) {
                    this.data = res.Data
                    this.order = res.Data.Order
                    this.show = true
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        tipclose() {
            this.$refs.authorizationTip.close()
        },
        clickFn() {
            var that = this
            let webInfo = storage.getCache("webInfo")
            let openId = storage.getCache("openId")
            if (openId) {
                let notify_url = configs.baseUrl + "Notify/OrderPay/" + this.businessId
                let tip = "订单支付"
                let payParam = {
                    tip: tip,
                    orderSn: this.order.Sn,
                    paySn: this.order.OutTradeNo,
                    money: this.order.PayMoney,
                    notifyUrl: notify_url,
                    payWay: this.payWay,
                    businessId: this.businessId,
                    openId: openId,
                }
                uni.showLoading({
                    title: "付款中..",
                    mask: true,
                })
                that.wxpay(payParam)
            } else {
                this.$refs.authorizationTip.open()
            }
        },
        openMiniPay(payRes) {
            var that = this
            //微信支付api1
            uni.requestPayment({
                provider: "wxpay",
                // appId:payRes.Data.appId,
                timeStamp: String(payRes.Data.timeStamp),
                nonceStr: payRes.Data.nonceStr,
                package: payRes.Data.package,
                signType: payRes.Data.signType,
                paySign: payRes.Data.paySign,
                success: function (res) {
                    uni.hideLoading()
                    that.easyReLaunch(
                        "/pages_shop/packet/order/payResult?orderId=" + that.orderId + "&formapp=" + that.formapp,
                    )
                },
                fail: function (err) {
                    console.log("支付失败", err)
                    uni.hideLoading()
                    // that.getOrderDetail()
                    that.goOrderPage()
                },
            })
        },
        wxpay(payParam) {
            var that = this
            let path = "?businessId=" + this.businessId
            GetMiniAppPayData(payParam, path).then((payRes) => {
                if (payRes.State) {
                    if (this.payWay == 18) {
                        uni.navigateToMiniProgram({
                            appId: 'wx9f0f95c42bcf73c9',
                            path: 'pages/pay-plugin/pay-plugin?tradeNo=' + payRes.Data.appId + '&type=BF',
                            success(res) {
                                // 打开成功
                                that.easyReLaunch(
                                    "/pages_shop/packet/order/payResult?orderId=" + that.orderId + "&formapp=" + that.formapp,
                                )
                            }
                        })
                    } else {
                        this.openMiniPay(payRes)
                    }
                } else {
                    this.easyToast(payRes.Msg)
                    setTimeout(() => {
                        uni.hideLoading()
                    }, 2000)
                }
            })
        },
    },
}
</script>

<style lang="scss">
page {
    background: #f7f7f7 !important;
}

.container {
    background: #f7f7f7;
    padding: $app-page-padding $app-page-padding 120rpx $app-page-padding;
}

.result-status {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 32rpx;
}

.success-icon {
    width: 108rpx;
    height: 108rpx;
    display: block;
    margin-right: 16rpx;
}

.tip {
    font-size: 28rpx;
    color: $color-gray-2;
    text-align: center;
}

.ought-price {
    background: #ffffff;
    border-radius: 24rpx;
    height: 224rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 24rpx;

    view {
        font-size: 80rpx;
        font-weight: bold;
        color: #000000;

        text {
            font-size: 48rpx;
        }
    }

    text {
        font-size: 28rpx;
        color: $color-gray-2;
    }
}

.balance {
    background: $color-white;
    margin-bottom: 34rpx;
    border-radius: 24rpx;
}

.balance-title {
    height: 98rpx;
    background: linear-gradient(270deg, #ffede9 0%, #fffbf9 100%);
    border-radius: 24rpx 24rpx 0px 0px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #000000;
    font-size: 32rpx;
    font-weight: bold;

    image {
        width: 40rpx;
        height: 40rpx;
        margin: 0 22rpx 0 30rpx;
    }
}

.balance-body {
    background: #ffffff;
    height: 180rpx;
    display: flex;
    padding: 10rpx 24rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-radius: 0px 0px 24rpx 24rpx;
}

.balance-body-check {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.balance-input {
    view {
        font-size: 24rpx;
        color: $color-gray-2;
    }

    input {
        width: 230rpx;
        height: 60rpx;
        background: #f8f8f8;
        border-radius: 4rpx;
        border: 1rpx solid #000000;
        text-align: center;
        font-weight: bold;
        font-size: 36rpx;
    }

    .inputbox {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 230rpx;
        height: 60rpx;
        background: #f8f8f8;
        border-radius: 4rpx;
        border: 1rpx solid #000000;
        text-align: center;
        font-weight: bold;
        font-size: 36rpx;
        color: #000000;
    }
}

.checkmain {
    width: 32rpx;
    height: 32rpx;
    border: 1rpx solid rgba(0, 0, 0, 0.3);

    image {
        width: 32rpx;
        height: 32rpx;
        display: block;
    }
}

.checkbox-active {
    border-color: $app-color-main;
    background: $app-color-main;
}

.balance-title-Still {
    display: flex;
    flex-direction: column;
    height: 180rpx;
    padding-right: 24rpx;
    padding-top: 26rpx;
    padding-left: 30rpx;
    background: linear-gradient(270deg, #fff8ee 0%, #fffefc 100%);

    .balance-input {
        width: 100%;
    }
}

.no-change-price {
    height: 70rpx;
}

.still {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 36rpx;
}

.still-title {
    display: flex;

    image {
        margin-left: 0;
    }
}

.playlist {
    &>view {
        height: 112rpx;
        margin: 0 24rpx;
        display: flex;
        // justify-content: space-between;
        align-items: center;
        background: #ffffff;
        border-bottom: 1rpx solid #ebebeb;
    }

    &>view:last-child {
        border-bottom: none;
        border-radius: 0 0 24rpx 24rpx;
    }

    .playtype {
        padding-right: 16rpx;

        .pay-type-icon {
            width: 48rpx;
            height: 48rpx;
            margin-right: 12rpx;
        }

        .pay-type-name {
            flex: 1;
        }

        .radio {
            width: 38rpx;
            height: 38rpx;
            border: 2rpx solid rgba(0, 0, 0, 0.3);
            border-radius: 50%;
        }

        .active_radio {
            border-color: $app-color-main;
            display: flex;
            justify-content: center;
            align-items: center;

            text {
                width: 20rpx;
                height: 20rpx;
                border-radius: 50%;
                background: $app-color-main;
            }
        }
    }
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120rpx;
    display: flex;
    background: #ffffff;
    justify-content: center;
    align-items: center;
    padding-bottom: constant(safe-area-inset-bottom);
    /*兼容 IOS<11.2*/
    padding-bottom: env(safe-area-inset-bottom);

    /*兼容 IOS>11.2*/
    .btn {
        color: #fff;
        background: #fe5822;
        width: 690rpx;
        height: 90rpx;
        border-radius: 45rpx;
        font-size: 32rpx;
    }

    .btn[disabled] {
        background: rgba($app-color-main, 0.4);
        color: #ffffff;
    }
}

.playlist-offline {
    &>view {
        border-bottom: none;
    }

    .offline-pay {
        border-radius: 4rpx;
        background: #fbfbfb;
        height: auto;
        display: flex;
        flex-direction: column;

        .offline-pay-item {
            width: calc(100% - 68rpx);
            display: flex;
            flex-direction: row;
            height: 112rpx;
            align-items: center;
            padding: 0 16rpx 0 52rpx;

            .pay-type-icon {
                width: 48rpx;
                height: 48rpx;
                margin-right: 12rpx;
            }

            .pay-type-name {
                flex: 1;
            }

            .radio {
                width: 38rpx;
                height: 38rpx;
                border: 2rpx solid rgba(0, 0, 0, 0.3);
                border-radius: 50%;
            }

            .active_radio {
                border-color: $app-color-main;
                display: flex;
                justify-content: center;
                align-items: center;

                text {
                    width: 20rpx;
                    height: 20rpx;
                    border-radius: 50%;
                    background: $app-color-main;
                }
            }
        }
    }

    padding-bottom: 24rpx;
}
</style>
